<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=., initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: 0px;
        }
        .aa{
            width: 100%;
            height: 67px;
            position: fixed;
            top: 0%;
            background:white;
            border-width: 0px 0px 1px 0px;
            border-style: solid;
            border-color: darkgray;
        }
        .bb{
            width: 1207px;
            height: 512px;
            margin: 90px auto 25px;
            background:white;
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: black;
        }
        .ee{
            width: 1207px;
            height: 34px;
            margin: 25px auto;
            background:white;
        }
        .cc{
            height: 980px;
            width: 1209px;
            margin: 25px auto;
            background: white;
        }
        .dd{
            height: 35px;
            width: 1209px;
            margin: 1px auto;
            background: slategrey;
            text-align: center;
            line-height: 36px;
        }
        .log{
            width:40px;
            height: 40px;
            margin: 12px;
        }
        .logo{
            width: 70px;
            height: 65px;
            float: left;
        }
        .zan{
            width: 240px;
            height: 52px;
            float: left;
        }
        .zan{
            margin: 20px 10px;
        }
        .lian{
            font-size: 22px;
            margin-left: 20px;
            color: white;
            background:red;
            border-radius: 10%;
        }
        .lian{
            list-style: none;
        }
        .daohang{
            height: 66px;
            width: 1650px;
            float: left;
        }
        .daohan{
            width: 700px;
            height: 66px;
            margin: auto;
        }
        li{
            float: left;
            list-style: none;
            margin: 9px;
            margin-top: 22px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .suo{
            width: 50px;
            height: 65px;
            float: left;
        }
        .fang{
            width: 50px;
            height: 50px;
            margin-top: 10px;
        }
        .den{
            width: 40px;
            height: 30px;
            float: left;
            margin: 21px;
            background: red;
            border-radius: 10%;
        }
        .denglu{
            color: white;
        }
        .sheji{
            width: 880px;
            height: 512px;
            float: left;
            background: chocolate;
        }
        .shejii{
            width: 880px;
            height: 512px;
            float: right;
        }
        .san{
            width: 300px;
            height: 512px;
            background: white;
            float: right;
        }
        .s{
            width: 300px;
            height: 163px;
            background: skyblue;
        }
        .ss{
            width: 300px;
            height: 163px;
            background: skyblue;
            margin-top: 10px;
        }
        .sss{
            width: 300px;
            height: 166px;
            background: skyblue;
            margin-top: 10px;
        }
        .sange{
            width: 300px;
            height: 163px;
        }
        .sangee{
            width: 300px;
            height: 166px;
        }
        h1{
            position: absolute;
            bottom: 577px;
            background: rgba(0, 0, 0, 0.3);
            font-size: 15px;
            color: #fff;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        h2{
            position: absolute;
            bottom: 227px;
            background: rgba(0, 0, 0, 0.3);
            font-size: 30px;
            color: #fff;
            width: 880px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        h3{
            position: absolute;
            bottom: 403px;
            background: rgba(0, 0, 0, 0.3);
            font-size: 15px;
            color: #fff;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .q{
            font-size: 26px;
        }
        .one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve{
            width: 290px;
            height: 320px;
            float: left;
            margin-right: 10px;
            margin-top: 10px;
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: black;
            background:white;
        }
        .b{
            width: 290px;
        }
        .zanzhu{
            width: 1209px;
            height: 200px;
            margin: auto;
            margin-top: 10px;
            background:white;
        }

     </style>
</head>
<body>
    <!--第一部分 头 -->
    <div class="aa">
        <div class="logo">
            <a href="http://" target="_blank" rel="noopener noreferrer"><img class="log" src="images/favicon.png" alt=""></a>
        </div>
        <div class="zan">
            <a class="lian" href="http://" target="_blank" rel="noopener noreferrer">赞</a>
            <a class="lian" href="http://" target="_blank" rel="noopener noreferrer">萌</a>
            <a class="lian" href="http://" target="_blank" rel="noopener noreferrer">哈</a>
            <a class="lian" href="http://" target="_blank" rel="noopener noreferrer">艹</a>
            <a class="lian" href="http://" target="_blank" rel="noopener noreferrer">买</a>
        </div>
        <div class="daohang">
            <ul class="daohan">
                <li><a href="https://www.shejipi.com/" target="_blank" rel="noopener noreferrer">首页</a></li>
                <li><a href="https://www.shejipi.com/works" target="_blank" rel="noopener noreferrer">作品</a></li>
                <li><a href="https://www.shejipi.com/category/event" target="_blank" rel="noopener noreferrer">活动</a></li>
                <li><a href="https://www.shejipi.com/features" target="_blank" rel="noopener noreferrer">专题</a></li>
                <li><a href="https://www.shejipi.com/pi-weekly-2020-2" target="_blank" rel="noopener noreferrer">Pi周刊</a></li>
                <li><a href="https://www.shejipi.com/wow/bigbang/" target="_blank" rel="noopener noreferrer">设计大爆炸</a></li>
                <li><a href="https://www.shejipi.com/hao" target="_blank" rel="noopener noreferrer">设计导航</a></li>
                <li><a href="https://www.shejipi.com/wow/service/" target="_blank" rel="noopener noreferrer">商务合作</a></li>
                <li><a href="https://www.shejipi.com/about" target="_blank" rel="noopener noreferrer">关于我们</a></li>
                <li><a href="https://www.shejipi.com/wow/help/" target="_blank" rel="noopener noreferrer">帮助</a></li>
            </ul>
        </div>
        <div class="suo">
            <img class="fang" src="images/fang.jpg" alt="" >
        </div>
        <div class="den">
            <a class="denglu" href="https://www.shejipi.com/#">登录</a>
        </div>
    </div>
    <!--第二部分 -->
   <div class="bb">
       <div class="sheji">
           <img class="shejii" src="images/s003.jpg" alt="">
           <h2>
               <!-- <span>Brand 100,设计成就品牌</span> -->
           </h2>
       </div>
       <div class="san">
           <div class="s">
               <img class="sange" src="images/s02.jpg" alt="">
               <h1>
                <!-- <span>想点亮圣诞气氛？试试这个【驯鹿】灯</span> -->
            </h1>
           </div>
           <div class="ss">
               <img class="sange" src="images/s03.jpg" alt="">
               <h3>
                   <!-- <span>Designer 100,100个设计师，100个故事</span> -->
               </h3>
           </div>
           <div class="sss">
               <img class="sangee" src="images/s04.jpg" alt="">
           </div>
       </div>
    </div>
 <!-- 第三部分 -->
<ul class="ee">
    <select  class="q" name="" id=""><option value="">最新</option></select>
    <select  class="q" name="" id=""><option value="">最热</option></select>
    <select  class="q" name="" id=""><option value="">热议</option></select>
    <select  class="q" name="" id=""><option value="">随机</option></select>
</ul>
<!-- 第四部分 -->
<ul class="cc">
    <div class="one" >
        <img class="b" src="images/i01.jpg" alt="">
        <p>用水才能擦去笔记，它只想保护好设计师的创意</p>
        <br>
        <p>2小时前</p>
    </div>
    <div class="two" >
        <img class="b" src="images/i02.jpg" alt="">
        <p>马桶也要有优雅的姿态</p>
        <br>
        <p>3小时前</p>
    </div>
    <div class="three" >
        <img class="b" src="images/i03.jpg" alt="">
        <p>健身也走【科技范】，你以为这仅仅只是个瑜伽垫？</p>
        <br>
        <p>16小时前</p>
    </div>
    <div class="four" >
        <img class="b" src="images/i04.jpg" alt="">
        <p>牙缝清洁怎么办？牙签牙线都过时了，用【刷子】刷吧</p>
        <br>
        <p>16小时前</p>
    </div>
    <div class="five" >
        <img class="b" src="images/i05.jpg" alt="">
        <p>矮怎么了？照样能够拿到书架顶端的书</p>
        <br>
        <p>16小时前</p>
    </div>
    <div class="six" >
        <img class="b" src="images/i06.png" alt="">
        <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p>
        <br>
        <p>2小时前</p>
    </div>
    <div class="seven" >
        <img class="b" src="images/i07.jpg" alt="">
        <p>中国国际设计节PK世界工业设计大会，哪个更棒？</p>
        <br>
        <p>20小时前</p>
    </div>
    <div class="eight" >
        <img class="b" src="images/i08.jpg" alt="">
        <p>首届世界工业设计大会家门口杭州，中国设计师门燥起来</p>
        <br>
        <p>23小时前</p>
    </div>
    <div class="nine" >
        <img class="b" src="images/i09.jpg" alt="">
        <p>窝在北方的暖炉里，你应该需要这样一个散热阀门吗？</p>
        <br>
        <p>1天谴前</p>
    </div>
    <div class="ten" >
        <img class="b" src="images/i10.jpg" alt="">
        <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
        <br>
        <p>2天前</p>
    </div>
    <div class="eleven" >
        <img class="b" src="images/i11.jpg" alt="">
        <p>倚靠在毯子上，这件事听着就让人舒坦</p>
        <br>
        <p>2天前</p>
    </div>
    <div class="twelve" >
        <img class="b" src="images/i07.png" alt="">
        <p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就变</p>
        <br>
        <p>2天前</p>
    </div>
</ul>

<!-- 第四部分 -->
<p class="dd">太快了吧，笑死，根本不会做</p>

<!-- 第五部分 -->
<div class="zanzhu">
    <p>合作伙伴</p>
    <br><br>
    <img src="images/x01.png" alt="">
    <img src="images/x02.png" alt="">
    <img src="images/x03.png" alt="">
    <img src="images/x04.png" alt="">
    <img src="images/x05.png" alt="">
    <img src="images/x06.png" alt="">
    <img src="images/x07.png" alt="">
    <br><br><br>
    <p>友情链接</p>
    <br>
       <a class="link" href="">DRC北京工业设计创意产业基地</a>
       <span>|</span>
       <a class="link" href="">中国工业设计协会</a>
       <span>|</span>
       <a class="link" href="">设计邦</a>
       <span>|</span>
       <a class="link" href="">网易家居</a>
       <span>|</span>
       <a class="link" href="">凤凰家局</a>
       <span>|</span>
       <a class="link" href="">智东西</a>
       <span>|</span>
       <a class="link" href="">壹网空间</a>
       <span>|</span>
       <a class="link" href="">七牛云存储</a>
       <span>|</span>
       <a class="link" href="">高清图片</a>
       <span>|</span>
       <a class="link" href="">Fotor</a>
       </div>
</div>
</body>
</html>